import React from 'react';
import {connect} from 'dva';
import {StickyContainer} from 'react-sticky';
import {ListView, List} from 'antd-mobile';
import {NavBar, Card} from 'antd-mobile';
import {routerRedux} from 'dva/router';

const {Item} = List;

function genData(ds, provinceData) {
  const dataBlob = {};
  const sectionIDs = [];
  const rowIDs = [];
  Object.keys(provinceData).forEach((item, index) => {
    sectionIDs.push(item);
    dataBlob[item] = item;
    rowIDs[index] = [];

    provinceData[item].forEach((jj) => {
      rowIDs[index].push(jj.value);
      dataBlob[jj.value] = jj.label;
    });
  });
  return ds.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs);
}


const brandsUrl = 'cars/fetch_brands'
@connect(({ cars, loading }) => ({
  store: cars,
  loading: loading.effects[brandsUrl],
}))


export default class BrandList extends React.Component {
  constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });

    this.state = {
      inputValue: '',
      dataSource,
    };
  }

  componentDidMount() {
    this.props.dispatch({
      type:brandsUrl,
      cb:()=>{
        const brands = {...this.props.store.brands};
        Object.keys(brands).forEach((item) => {
          if(item!=null){
            const arr = brands[item];
            if (arr==null||!arr.length) {
              delete brands[item];
            } else {
              brands[item] = arr;
            }
          }
        });
        this.setState({
          dataSource: genData(this.state.dataSource, brands),
        });
      }
    })
  }


  itemClick = (item,sectionID, rowID) => {
    var section_brand = this.props.store.brands[sectionID] ;
    for(var series of section_brand){
      if(series.value === rowID){
        this.props.dispatch({
          type:'cars/set_brand',
          payload:series
        })
      }
    }
    this.props.dispatch(routerRedux.push('/serieslist'));
  }

  render() {

    return (<Card>
      <div style={{position: 'fixed', top: 0, left: 0, right: 0, zIndex: 2}}>
        <NavBar
          mode="dark"
          leftContent={'返回'}
          onLeftClick={() => {
            this.props.dispatch(routerRedux.push('/'));
          }}
        >品牌列表</NavBar>
      </div>
      <div style={{
        position: 'fixed',
        top: 20,
        left: 0,
        right: 0,
        zIndex: 1,
        paddingTop: 10,
        paddingBottom: 10,
        background: '#fff'
      }}>
      </div>
      <div style={{paddingTop: 50, zIndex: 0}}>
        <ListView.IndexedList
          dataSource={this.state.dataSource}
          className="am-list"
          useBodyScroll
          renderSectionWrapper={sectionID => (
            <StickyContainer
              key={`s_${sectionID}_c`}
              className="sticky-container"
              style={{zIndex: 4}}
            />
          )}
          renderSectionHeader={sectionData => (
            <div
              className="sticky"
              style={{
                zIndex: 3,
                backgroundColor: '#5890ff',
                color: 'white',
              }}
            >{sectionData}</div>
          )}
          renderRow={(rowData, sectionID, rowID, highlightRow) => (<Item onClick={() => {
            this.itemClick(rowData,sectionID, rowID, highlightRow);
          }}>{rowData}</Item>)}
          quickSearchBarStyle={{
            top: 85,
          }}
          delayTime={10}
          delayActivityIndicator={<div
            style={{padding: 25, textAlign: 'center', fontSize: 12, color: '#e2e2e2'}}>正在加载中...</div>}
        />
      </div>
    </Card>);
  }
}

